<template>
  <v-menu min-width="320" max-width="360" :close-on-content-click="false" open-on-hover left nudge-left="30" offset-y nudge-top="10" close-delay="200">
    <template v-slot:activator="{ on: menu, attrs }">
      <v-tooltip bottom>
        <template v-slot:activator="{ on: tooltip }">
          <v-badge color="red" dot :value="unread>0" offset-x="16" offset-y="16">
            <v-btn icon v-bind="attrs" v-on="{ ...tooltip, ...menu }">
              <v-icon color="white">mdi-bell-ring-outline</v-icon>
            </v-btn>
          </v-badge>
        </template>
        <span>消息</span>
      </v-tooltip>
    </template>
    <v-toolbar dense flat>
      <v-btn class="pl-2" plain @click="mode=!mode"> {{mode?`查看未读(${unread})`:`查看已读(${read})`}} </v-btn>
      <v-spacer></v-spacer>
      <v-btn small icon class="mr-1" v-if="!mode" @click="readAll">
        <TipIcon icon="mdi-email-open-multiple" size="20" tip="全部标记已读"></TipIcon>
      </v-btn>
    </v-toolbar>
    <v-divider></v-divider>
    <v-list dense>
      <v-list-item v-for="(m, i) in viewlist" :key="i" link @click="view(m)">
        <v-list-item-avatar class="mr-0">
          <v-icon size="24" :color="m.unread?m.color:''" v-text="m.icon"></v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title class="text-subtitle-2 text-truncate">{{ m.title }}</v-list-item-title>
        </v-list-item-content>
        <v-list-item-action>
          <v-btn icon>
            <v-icon color="grey lighten-1">mdi-delete</v-icon>
          </v-btn>
        </v-list-item-action>
      </v-list-item>
      <v-list-item v-if="viewlist.length===0" class="pa-5 pt-10 pb-10 justify-center" disabled> 哎呀呀，都被你看光了 </v-list-item>
      <v-list-item v-else class="pa-0 justify-center">
        <v-btn class="ma-1" color="grey" plain block tile> 查看更多 </v-btn>
      </v-list-item>
    </v-list>
  </v-menu>
</template>
<script>
  import TipIcon from '@/components/tipicon'
  export default {
    components: { TipIcon },
    data() {
      return {
        max: 10,
        mode: false, // false:当前看未读 true:当前看已读
        messages: [],
        read: 0, // 已读
        unread: 0, // 未读
      }
    },
    computed: {
      viewlist() {
        let list = []
        let mess
        for (let i in this.messages) {
          mess = this.messages[i]
          // 当前未读，
          if (this.mode && !mess.unread) list.push(mess)
          // 当前已读
          else if (!this.mode && mess.unread) list.push(mess)
        }
        return list
      }
    },
    mounted() {
      this.genNotify()
    },
    methods: {
      // =====================
      // 测试代码
      // =====================
      genNotify() {
        let testNotices = [
          {
            type: 'notice',
            color: 'primary',
            icon: 'mdi-airplane-takeoff',
            title: '航班已经开始起飞，预计2小时18分后到达浦东国际机场',
          },
          {
            type: 'error',
            color: 'error',
            icon: 'mdi-bus-alert',
            title: '公交车延迟到站，请联系公交司机了解情况',
          },
          {
            type: 'warn',
            color: 'orange',
            icon: 'mdi-bank-transfer',
            title: '银行账户有大笔资金转出，已设置2小时延迟，请火速确认',
          },
          {
            type: 'success',
            color: 'green',
            icon: 'mdi-car-back',
            title: '外出车辆已回车库，司机已报备成功',
          }
        ]
        setTimeout(() => {
          this.$vcevent.emit('notifyreceived', {
            unread: true,
            ...this.$vcext.randSelect(testNotices)
          })
          this.notifyallread = false
          // 继续
          this.genNotify()
        }, this.$vcext.randInt(3000, 10000))
      },
      // =====================
      view(message) {
        message.unread = false
        this.$vcui[message.type](message.title, this.$vcext.randInt(2500, 10000))
        this.statRead()
      },
      statRead() {
        let count = 0
        for (let i in this.messages) {
          if (this.messages[i].unread) count++
        }
        this.unread = count
        this.read = this.messages.length - count
      },
      readAll() {
        for (let i in this.messages) {
          this.messages[i].unread = false
        }
        this.statRead()
      },
    },
    onNotifyReceived(message) {
      let messages = this.messages
      if (messages.length >= 10) {
        messages.splice(0, messages.length - 9, message)
      } else {
        messages.push(message)
      }
      // 
      this.statRead()
    }
  }
</script>
